import { FC } from "react";
import { FormItemChildProps } from "../../types/comp";
import { clone, findIndex, isArray } from "lodash";
import { Button, Descriptions, Form, Input, Popconfirm, Popover, Slider, Tag } from "antd";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { BusinessItemListInfo } from "../../types/business";
import Dialog from "../Dialog";
import DyTabs from "../Tabs";

const KeyWordCtrl: FC<FormItemChildProps> = ({ value, onChange }) => {
  const handleValue = isArray(value) ? value : [];
  const onCreate = () => async () => {
    const data = await keywordDialog();
    const newVal = clone(value || []);
    newVal.push(data);
    onChange?.(newVal);
    console.log(newVal);
  };
  const onDelete = (item: any) => {
    return () => {
      if (!isArray(value)) return;
      const findIdx = findIndex(value, item);
      if (findIdx === -1) return;
      const newVal = clone(value);
      newVal.splice(findIdx, 1);
      onChange?.(newVal);
    };
  };
  const onEditor = (item: any) => {
    return async () => {
      const data = await keywordDialog(item);
      const idx = findIndex(value, item);
      if (idx === -1) return;
      const newVal = clone(value || []);
      newVal[idx] = data;
      onChange?.(newVal);
    };
  };
  return (
    <div className="w-[250px]">
      <Button type="primary" size="small" onClick={onCreate()}>
        新增
      </Button>
      <div className="mt-[5px]">
        {handleValue.map((item, idx) => (
          <Popover
            placement="top"
            title={item.name}
            content={
              <div className="w-[200px]">
                <Descriptions column={1}>
                  <Descriptions.Item label="包含">
                    {item.include}
                  </Descriptions.Item>
                  <Descriptions.Item label="排除">
                    {item.exclude}
                  </Descriptions.Item>
                  <Descriptions.Item label="得分">
                    {item.score || 0}
                  </Descriptions.Item>
                </Descriptions>
              </div>
            }
            trigger="hover"
          >
            <Tag key={idx}>
              <div className="flex w-[80px]">
                <div className="flex-1">{item.name}</div>
                <div>
                  <EditOutlined onClick={onEditor(item)} className="mr-[5px]" />
                  <Popconfirm
                    placement="top"
                    title="确认删除该关键词么"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={onDelete(item)}
                  >
                    <DeleteOutlined />
                  </Popconfirm>
                </div>
              </div>
            </Tag>
          </Popover>
        ))}
      </div>
    </div>
  );
};

const keywordDialog = (item?: BusinessItemListInfo) => {
  const isModify = !!item;
  let newData = item || {};
  return new Promise((resolve, reject) => {
    Dialog({
      title: isModify ? "修改关键词" : "新增关键词",
      content: (
        <Form initialValues={item}>
          <Form.Item label="名称" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="包含" name="include">
            <DyTabs />
          </Form.Item>
          <Form.Item label="排除" name="exclude">
            <DyTabs />
          </Form.Item>
          <Form.Item label="得分" name="score" initialValue={1}>
            <Slider min={0} max={10} />
          </Form.Item>
        </Form>
      ),
      onOk: (values, hidden) => {
        resolve(Object.assign(clone(newData), values));
        hidden();
      },
      onCancel: reject,
    });
  });
};


export default KeyWordCtrl;
